<template>
  <div id="stackbarchart">
    <div id="stackbar"></div>
    <div id="stackbarData">
      <template>
        <el-table :data="stackbarData" height="250" style="width: 100%;">
          <el-table-column prop="date" label="日期" align="center" header-align="center"></el-table-column>
          <el-table-column prop="food" label="食物"></el-table-column>
          <el-table-column prop="transportation" label="交通"></el-table-column>
          <el-table-column prop="education" label="教育"></el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script>
import * as d3 from 'd3'
import {StackBarChart} from './StackBarChart'
export default {
  data () {
    return {
      stackbarChart: '',
      stackbarData: []
    }
  },
  mounted () {
    this.stackbarChart = new StackBarChart('stackbar')
    this.getData()
  },
  methods: {
    async getData () {
      d3.csv('./static/data/stackBar.csv', data => {
        this.stackbarData = data.map(d => {
          return {
            date: d.date,
            food: +d.food,
            transportation: +d.transportation,
            education: +d.education
          }
        })
        this.stackbarChart.data = this.stackbarData
        this.stackbarChart.title = 'StackBar'
        this.stackbarChart.xLabel = '日期'
        this.stackbarChart.yLabel = ''
        this.stackbarChart.itemsName = ['food', 'transportation', 'education']
        this.stackbarChart.draw()
      })
    }
  }
}
</script>
<style scoped>
#stackbarchart {
  height: 100%;
  width: 100%;
}
#stackbar {
  height: 70%;
  width: 100%;
}
#stackbarData {
  height: 30%;
  width: 100%;
}
</style>
